<template>
  <div class="conversation-chats">
    <!-- 好友信息 -->
    <div class="chats-title">
      <!-- 昵称 -->
      <span
        class="nick-name ellipsis"
        v-text="currentFriend.ShowName || currentFriend.NickName || currentFriend.FriendNick"
      ></span>
      <div
        v-if="currentFriend.MemberList"
        class="members-number"
        v-text="'(' + currentFriend.MemberList.length + ')'"
      ></div>
      <!-- 性别 -->
      <div v-if="currentFriend.Gender" class="gender" v-text="currentFriend.Gender"></div>
      <!-- 地址 -->
      <div v-if="currentFriend.Province" class="address" v-text="currentFriend.Province"></div>
      <div v-if="currentFriend.City" class="address" v-text="currentFriend.City"></div>
    </div>

    <!-- 输入/输出 -->
    <div class="chats-content">
      <ShowChats class="show-chats" />
      <div class="input-window">
        <ToolsBar />
        <AnswerWindow />
      </div>
    </div>
    
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import ToolsBar from './ToolsBar'
import AnswerWindow from './AnswerWindow'
import ShowChats from './ShowChats'

export default {
  components: {
    ToolsBar,
    AnswerWindow,
    ShowChats
  },
  data() {
    return {}
  },
  computed: {
    ...mapGetters({
      currentFriend: 'conversation/currentFriend'
    })
  }
}
</script>

<style lang="scss" scoped>
.conversation-chats {
  height: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #f3f3f3;
  border-right: solid #c3c3c3 1px;

  .chats-title {
    height: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #333333;
    justify-content: flex-start;
    padding-left: 5px;
    border-bottom: solid #c3c3c3 1px;

    .nick-name,
    .gender,
    .address,
    .members-number {
      font-size: 14px;
      margin-left: 10px;
    }
    .nick-name {
      max-width: 250px;
    }
  }

  .chats-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow-y: auto;

    .input-window {
      height: 35%;
      background: white;
      width: 100%;
      display: flex;
      flex-direction: column;
    }
  }
}
</style>

